<template>
  <div class="postManage">
    <div class="searchBox">
      <div class="left">
        <label for="">姓名：</label>
        <el-input placeholder="请输入姓名" v-model="searchname" />
      </div>
      <div style="margin-right: 10px">
        <el-checkbox v-model="checkedReg" label="转正" />
        <el-checkbox v-model="checkedPostpone" label="延期" size="large" />
        <el-checkbox v-model="checkedNotpass" label="不通过" size="large" />
      </div>
      <div class="right">
        <el-button type="primary" @click="seaUser">
          <el-icon><Search /></el-icon>
          搜索
        </el-button>
        <el-button type="primary" @click="reset">
          <el-icon><Refresh /></el-icon>
          重置
        </el-button>
        <el-button type="primary" @click="Excelbtn">
          <el-icon><UploadFilled /></el-icon>
          导出Excel
        </el-button>
      </div>
    </div>
    <common-table
      :style="{ flex: 1 }"
      :table-data="tableData"
      :columns="columns"
      :pagination="pagination"
    >
      <template #state="{ row }">
        <el-tag :type="row.state == '转正' ? 'success' : 'danger'">
          {{ row.state }}
        </el-tag>
      </template>
      <template #operate="{ row }">
        <el-link type="primary" style="margin-right: 8px" @click="updatebtn(row)">
          <el-icon :size="20">
            <Edit />
          </el-icon>
          <span>修改</span>
        </el-link>
      </template>
    </common-table>
    <!-- 修改试用期弹出框 -->
    <el-dialog class="addDialog" v-model="centerDialogVisible" title="修改" width="25%">
      <el-form ref="addFormRef" :model="perForm">
        <el-form-item label="姓名：">
          <el-input class="addDialog_input" v-model="perForm.name" disabled />
        </el-form-item>
        <el-form-item label="地址：">
          <el-input class="addDialog_input" v-model="perForm.address" disabled />
        </el-form-item>
        <el-form-item label="电话：">
          <el-input class="addDialog_input" v-model="perForm.phone" disabled />
        </el-form-item>
        <el-form-item label="状态：">
          <el-select
            v-model="perForm.probation_status"
            class="m-2"
            placeholder="请选择状态"
            size="large"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="centerDialogVisible = false">关闭</el-button>
          <el-button type="primary" @click="postOk">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import CommonTable from '@/components/CommonTable.vue';
import { columns, tableDataText } from '@/views/probationManage/mockData';
import { getAllAPI, exportExcelAPI, updateProbationStatusAPI } from '@/api/probationManage.js';
import { onBeforeMount } from 'vue';
import FileSaver from 'file-saver';

const centerDialogVisible = ref(false);

const perForm = ref({
  name: '',
  address: '',
  phone: '',
  probation_status: '',
});

const options = [
  {
    value: 7,
    label: '转正',
  },
  {
    value: 8,
    label: '试用不通过',
  },
  {
    value: 9,
    label: '延期转正',
  },
];

// const searValue = ref('');
const checkedReg = ref(true);
const checkedPostpone = ref(false);
const checkedNotpass = ref(false);

const pagination = ref({
  pageNum: 1,
  pageSize: 10,
  total: 0,
});
const searchname = ref('');
const tableData = ref([]);
// 获取所有数据
const getAll = async () => {
  const infolist = await getAllAPI({
    name: searchname.value,
    turned: checkedReg.value,
    rejected: checkedPostpone.value,
    delayed: checkedNotpass.value,
    page: pagination.value.pageNum,
    limit: pagination.value.pageSize,
  });
  tableData.value = infolist.data.list;
  pagination.value.total = infolist.data.count * 1;
};

const Excelbtn = async () => {
  const info = await exportExcelAPI({
    name: searchname.value,
    turned: checkedReg.value,
    rejected: checkedPostpone.value,
    delayed: checkedNotpass.value,
    page: pagination.value.pageNum,
    limit: pagination.value.pageSize,
  });
  FileSaver.saveAs(info, '试用期管理.xlsx');
};

onBeforeMount(() => {
  getAll();
});

//搜索试用期人员
const seaUser = async () => {
  const infolist = await getAllAPI({
    name: searchname.value,
    turned: checkedReg.value,
    delayed: checkedPostpone.value,
    rejected: checkedNotpass.value,
    page: pagination.value.pageNum,
    limit: pagination.value.pageSize,
  });
  console.log(infolist.data.list);
  tableData.value = infolist.data.list;
  pagination.value.total = infolist.data.count * 1;
};
//重置
const reset = () => {
  searchname.value = '';
  checkedReg.value = true;
  checkedPostpone.value = false;
  checkedNotpass.value = false;
  getAll();
};

const employeeId = ref('');
const updatebtn = async (row) => {
  perForm.value.name = row.name;
  perForm.value.address = row.address;
  perForm.value.phone = row.phone;
  centerDialogVisible.value = true;
  employeeId.value = row.employeeId;
  console.log(row);
};

const postOk = async () => {
  const info = await updateProbationStatusAPI({
    employeeId: employeeId.value,
    employeeState: perForm.value.probation_status,
  });
  console.log(info);
  searchname.value = '';
  checkedReg.value = true;
  checkedPostpone.value = false;
  checkedNotpass.value = false;
  getAll();
  centerDialogVisible.value = false;
};

const setPage = (v) => {
  pagination.value.pageNum = v;
  getAll();
};

const setSize = (v) => {
  pagination.value.pageNum = 1;
  pagination.value.pageSize = v;
  getAll();
};

defineExpose({
  setPage,
  setSize,
});
</script>

<style scoped lang="less">
.dialog-footer button:first-child {
  margin-right: 10px;
}

.postManage {
  background-color: #ffffff;
  flex: 1;
  max-height: 100%;
  display: flex;
  flex-direction: column;
}

.searchBox {
  display: flex;
  align-items: center;
  padding: 0 24px;
  height: 32px;

  margin: 16px 0;

  .left {
    display: flex;
    align-items: center;
    margin-right: 18px;
  }

  label {
    width: 60px;
    font-size: 14px;
    color: #999999;
    margin-right: 3px;
  }
}

.dialog_con {
  height: 55vh;
  overflow: auto;
  position: relative;
}
.example-pagination-block {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.find {
  margin-bottom: 20px;
  padding-left: 10px;
}
.diainput {
  width: 200px;
  margin-right: 20px;
}

.addDialog_input {
  width: 226px;
}
</style>
